<extend name='Public/_Main' />
<block name='title'>{$danye.biaoti}</block>
<block name='body'>
    <div class="container">
        <h2><center>{$danye.biaoti}-全国各地加盟分布图(部分待整理)</center></h2>
        <hr/>
        <div id='container' class='row' style='height:600px'></div>'
        <br/>
        <div class="row">
            <!-- <img src="http://img.qcwu.com.cn/xicheji/2.jpg" style='width:100%'> -->
            <img src="http://img.qcwu.com.cn/xicheji/5.jpg" style='width:100%'>
            <img src="http://img.qcwu.com.cn/xicheji/6.jpg" style='width:100%'>
            <img src="http://img.qcwu.com.cn/xicheji/7.jpg" style='width:100%'>
            <img src="http://img.qcwu.com.cn/xicheji/8.jpg" style='width:100%'>
        </div>
    </div>
    <script type="text/javascript">
var provinces ={$location};
    </script>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=565c8ec0d43b131f3795cf56eed64a79"></script>
    <script type="text/javascript">
    var map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 5,
        zooms: [4, 18],
        center: [106.485352, 34.603692]
    });
    var createMarker = function(data, hide) {
        var div = document.createElement('div');
        div.className = 'badge badge-danger text-default';
        var r = Math.floor(data.count / 1024);
        div.style.backgroundColor = hide ? '#DD514C' : '#DD514C';
        if (data.count) {
            div.innerHTML = data.name+'['+data.count+']';
        }else{
            div.innerHTML = data.name;
        }
        
        var marker = new AMap.Marker({
            content: div,
            title: data.name,
            position: data.center.split(','),
            offset: new AMap.Pixel(-24, 5),
            zIndex: data.count
        });
        marker.subMarkers = [];
        // if (data.name) {
        //     marker.setLabel({
        //         content: '&larr;',
        //         offset: new AMap.Pixel(45, 0)
        //     })
        //     map.setCenter(marker.getPosition());
        // }
        if (!hide) {
            marker.setMap(map)
        }
        if (data.subDistricts && data.subDistricts.length) {
            for (var i = 0; i < data.subDistricts.length; i += 1) {
                marker.subMarkers.push(createMarker(data.subDistricts[i], true));
            }
        }
        return marker;
    }
    var _onZoomEnd = function(e) {
        if (map.getZoom() < 6) {
            for (var i = 0; i < markers.length; i += 1) {
                map.remove(markers[i].subMarkers)
            }
            map.add(markers);
        }
    }
    var _onClick = function(e) {
        if (e.target.subMarkers.length) {
            map.add(e.target.subMarkers);
            map.setFitView(e.target.subMarkers);
            map.remove(markers)
        }
    }
    var markers = []; //province见Demo引用的JS文件
    for (var i = 0; i < provinces.length; i += 1) {
        var marker = createMarker(provinces[i]);
        markers.push(marker);
        AMap.event.addListener(marker, 'click', _onClick);
    }
    //map.setFitView();
    AMap.event.addListener(map, 'zoomend', _onZoomEnd);
    </script>
</block>
